<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/one_detail.css" rel="stylesheet" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	</head>

	<body>
		
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<script src="js/mui.js"></script>
				<script type="text/javascript">
					mui.init()
				</script>
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">消费详情</h1>
					<div class="delete"></div>
				</header>
				<!-- 主体 -->
				<div class="mui-content">
					<div class="sum">
						<div class="head">
							<div class="image">
								<img src="images/food.png" v-if="detail_info.data.detail_type =='餐饮'">
								<img src="images/game.png" v-if="detail_info.data.detail_type =='娱乐'">
								<img src="images/income.png" v-if="detail_info.data.detail_type =='收入'">
								<img src="images/jie.png" v-if="detail_info.data.detail_type =='借出'">
								<img src="images/phone.png" v-if="detail_info.data.detail_type =='通讯'">
								<img src="images/shop.png" v-if="detail_info.data.detail_type =='购物'">
								<img src="images/traffic.png" v-if="detail_info.data.detail_type =='交通'">
								<img src="images/other.png" v-if="detail_info.data.detail_type =='杂项'">
							</div>
							<div class="type">{{detail_info.data.detail_type}}</div>
							<div class="num"><font v-if ="detail_info.data.detail_type !='收入'">-</font> {{detail_info.data.detail_num}}</div>
						</div>
						<hr />
						<div class="body">
							<div class="con">
								<div class="text1">当前状态</div>
								<div class="text2">已记录</div>
							</div>
							<div class="con">
								<div class="text1">支付时间</div>
								<div class="text2">{{detail_info.data.time.split('.')[0].split('T')[0]}}  {{detail_info.data.time.split('.')[0].split('T')[1]}}</div>
							</div>
							<div class="con">
								<div class="text1">关联卡片</div>
								<div class="text2">{{detail_info.data.account.account_name}}</div>
							</div>
							<div class="con">
								<div class="text1">卡片号</div>
								<div class="text2">{{detail_info.data.account.account_num}}</div>
							</div>
							<p>备注信息:</p>
							
							<textarea rows="3" cols="20" class="info_text">{{detail_info.data.detail_info}}</textarea>
							
						</div>
					</div>
					<hr >
					
					<div id="popover" class="mui-popover">
						<p style="text-align: center;">类型仅限: 收入, 借出, 餐饮, 通讯, 娱乐, 购物, 交通, 杂项</p>
						<hr />
						<div class="mui-input-row">
							<label>备注</label>
							<textarea rows="3" cols="20" id="u_detail_info"></textarea>
						</div>
					    <form class="mui-input-group form_input">
					      	<div class="mui-input-row">
					      		<label>日期</label>
					      		<input id="u_detail_time1" type="text" class="mui-input-clear email" placeholder="xxxx-xx-xx" name="email" id="" value="" />
					      	</div>
							<div class="mui-input-row">
								<label>时间</label>
								<input id="u_detail_time2" type="text" class="mui-input-clear email" placeholder="xx:xx:xx" name="email" id="" value="" />
							</div>
					      	<div class="mui-input-row">
					      		<label>金额</label>
					      		<input id="u_detail_num" type="text" class="mui-input-clear password" placeholder="请输入金额" name="email" id="" value="" />
					      	</div>
							<div class="mui-input-row">
								<label>类型</label>
								<input id="u_detail_type" type="text" class="mui-input-clear password" placeholder="请输入消费类型" name="email" id="" value="" />
							</div>
							
					      	<div class="mui-button-row submit">
					      		<button id="change" type="button" class="mui-btn mui-btn-primary">修改</button>
					      		<button id="exit" type="button" class="mui-btn mui-btn-danger">取消</button>
					      	</div>
					    </form>
					</div>
					
					<div class="change">
						<button type="button" class="mui-btn mui-btn-blue" id="change_btn">此记录有误? 点我修改</button>
					</div>
				</div>
			</div>		
		</div>
		
		<script type="text/javascript">
			// 点击修改按钮
			document.getElementById('change_btn').addEventListener('tap',function(){
				mui('.mui-popover').popover('toggle',);
			})
			
			document.getElementById('change').addEventListener('tap',function(){
				var self = plus.webview.currentWebview();
				var de_id = self.de_id;//获得参数
				changed(de_id)
				mui('.mui-popover').popover('toggle',);
			})
			document.getElementById('exit').addEventListener('tap',function(){
				mui('.mui-popover').popover('toggle',);
			})
			
			// 修改函数
			function changed(de_id){
				var time1 = document.getElementById('u_detail_time1').value
				// if(time)
				var time2 = document.getElementById('u_detail_time2').value
				var detail_num = document.getElementById('u_detail_num').value
				var detail_info = document.getElementById('u_detail_info').value
				var detail_type = document.getElementById('u_detail_type').value
				var detail_time = time1 + 'T' + time2 + '.11'
				mui.ajax(localStorage.getItem('request_url')+ "cost/detail/change_one/?token="+localStorage.getItem('uid'), {
				    data:"token=" + localStorage.getItem('uid') + "&detail_id=" + de_id + '&detail_type=' + detail_type + '&detail_info=' + detail_info + '&detail_time=' + detail_time + '&detail_num=' + detail_num,
				    dataType:'json',  
				    type:'POST',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:2000,  
				    success:function show(e){
						mui.toast(e.msg)
						myRefresh()
					},  
				    error:function(xhr,type,errorThrown){
						var rdata = JSON.parse(xhr.responseText)
						mui.alert(rdata.msg, '出现意外', function() {
						});
				    }  
				});
			}
			
			// 重构back函数
			var old_back = mui.back;
			mui.back = function() {
			    // 获取目标口窗口对象
			    var target = plus.webview.getWebviewById('one_account.html');
			    var target2 = plus.webview.getWebviewById("detail_list.html");
				var target3 = plus.webview.getWebviewById("detail_info.html");
			    // 执行相应的事件
			    mui.fire(target, 'customEvent', {});
				mui.fire(target2, 'customEvent', {});
				mui.fire(target3, 'customEvent', {});
			    // 执行关闭
			    old_back();
			};
			
			document.getElementsByClassName('delete')[0].addEventListener('tap',function(){
				var self = plus.webview.currentWebview();
				var de_id = self.de_id;//获得参数
				var btnArray = ['不想看到', '取消删除', '错误数据'];
				mui.confirm('小主删除记录的原因是啥呢？', '🙈🙉🙊', btnArray, function(e) {
					if (e.index == 1) {
						mui.toast('已取消')
					}else if(e.index==2){
						delete_type(de_id,'error')
					}else{
						delete_type(de_id,'no_error')
					}
				})
				
			});
			
			
			// 调用删除方式
			function delete_type(de_id, type){
				mui.ajax(localStorage.getItem('request_url')+ "cost/detail/delete_one/?token="+localStorage.getItem('uid'), {
				    data:"token=" + localStorage.getItem('uid') + "&pk=" + de_id + '&type=' + type,
				    dataType:'json',  
				    type:'POST',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:2000,  
				    success:function show(e){
						mui.toast('✔' + e.msg);
						mui.back()
					},  
				    error:function(xhr,type,errorThrown){
						var rdata = JSON.parse(xhr.responseText)
						mui.toast(rdata.msg);
				    }  
				});
			}
			
			mui.init({
				pullRefresh : {
					container:"#pullrefresh",
					down: {
						height:50,
						style:'circle',
						auto:true,
						callback:myRefresh
					}
				}
			});
			// 下拉刷新
			function myRefresh(){
				mui.toast('😐同步数据中...请勿操作', {duration: 100,});
				setTimeout(function(){
					var self = plus.webview.currentWebview();
					var de_id = self.de_id;//获得参数
					mui.ajax(localStorage.getItem('request_url')+ "cost/detail/show_one/?token="+localStorage.getItem('uid'), {
					    data:"token=" + localStorage.getItem('uid') + "&pk=" + de_id,
					    dataType:'json',  
					    type:'POST',  
					    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
					    timeout:2000,  
					    success:function show(e){
							// 填充修改卡
							document.getElementById('u_detail_time1').value = e.data.time.split('.')[0].split('T')[0]
							document.getElementById('u_detail_time2').value = e.data.time.split('.')[0].split('T')[1]
							document.getElementById('u_detail_num').value = e.data.detail_num
							document.getElementById('u_detail_info').innerText = e.data.detail_info
							document.getElementById('u_detail_type').value = e.data.detail_type
							app.detail_info = e
							mui.toast('😀同步数据完成', {duration: 200,});
						},  
					    error:function(xhr,type,errorThrown){
							mui.toast('😫同步失败...下拉刷新');
					    }  
					});
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				},500)
			}
			
			app = new Vue({
			     el:'.sum',
			     data:{
			        detail_info: '',
			     },
			});

		</script>
	</body>

</html>
